<template>
<div>
  <!--导航条-->
  <Navbar :unauth="false" @open="toggleMenu($event)"></Navbar>
  <!--抽屉导航-->
  <mu-drawer :open.sync="open" :docked="docked">
    <mu-flex class="user-info" align-items="center">
      <mu-flex class="user-avatar">
        <mu-avatar :size="46">
          <img src="../assets/image/kiss.png" />
        </mu-avatar>
      </mu-flex>
      <mu-flex direction="column">
        <mu-flex style="font-size:16px">
          Elvira
          <mu-icon value="favorite" color="error"></mu-icon>
          Kylin
        </mu-flex>
        <mu-flex>
          性别：女
        </mu-flex>
      </mu-flex>
    </mu-flex>
    <mu-flex style="height: 40px;padding-left: 15px;">
      <mu-button small>
        编辑
        <mu-icon right value="library_books"></mu-icon>
      </mu-button>
      <mu-button small>
        退出
        <mu-icon right value="exit_to_app"></mu-icon>
      </mu-button>
    </mu-flex>
    <mu-divider></mu-divider>
    <mu-list :value="activeItem || 0">
      <mu-list-item button v-for="(item,i) in menuList" :value=i @click="changeItem(i,item.path)" :key=i>
        <mu-list-item-action>
          <mu-icon :value="item.icon" :color="iconColor(i)"></mu-icon>
        </mu-list-item-action>
        <mu-list-item-title>{{item.name}}</mu-list-item-title>
      </mu-list-item>
    </mu-list>
  </mu-drawer>

  <mu-row class="wrapper">
    <router-view></router-view>
  </mu-row>
</div>
</template>

<script>
import Vue from 'vue'
import Navbar from '@/components/Navbar'
import {
  Drawer,
  Icon,
  Grid,
  Avatar,
  Button,
  Divider
} from 'muse-ui'
Vue.use(Drawer).use(Icon).use(Grid).use(Avatar).use(Button).use(Divider)
export default {
  data () {
    return {
      docked: false,
      open: false,
      menuList: [{
        icon: 'home',
        name: '主页',
        path: 'home'
      },
      {
        icon: 'edit',
        name: '随笔',
        path: 'edit'
      },
      {
        icon: 'event',
        name: '纪念日',
        path: 'memory'
      },
      {
        icon: 'photo_album',
        name: '相册',
        path: 'album'
      },
      {
        icon: 'favorite',
        name: '愿望广场',
        path: 'wish'
      },
      {
        icon: 'loyalty',
        name: '默契考验',
        path: 'privity'
      }]
    }
  },
  computed: {
    activeItem () {
      let path = this.$route.path
      let activeItem
      this.menuList.map((ele, i) => {
        if (path.indexOf(ele.path) !== -1) {
          activeItem = i
        }
      })
      return activeItem
    }
  },
  components: { Navbar },
  methods: {
    toggleMenu () {
      this.open = !this.open
    },
    changeItem (i, path) {
      this.$router.push({ path: path })
      this.toggleMenu()
    },
    iconColor (i) {
      if (i === this.activeItem) {
        return 'primary'
      }
    }
  }
}
</script>

<style scoped>
.wrapper {
  padding-top: 60px;
}
.user-info {
  height: 80px;
}
.user-avatar {
  margin: 0 15px;
}
</style>
